<template>
  <div class="process" v-if="!viewOnly">
    <img src="../../assets/images/process1.png" alt="" />
  </div>
  <div class="wrap" :class="{ readonly: viewOnly }">
    <!-- 审核驳回提示 -->
    <div v-if="viewOnly && auditStatus === '2'" class="reject-reason">
      <el-alert :title="`审核驳回：${rejectReason}`" type="error" show-icon :closable="false" />
    </div>
    <div class="title">企业基本信息</div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="140px" label-position="left"
      style="margin-top: 23px">
      <el-form-item label="上传企业营业执照" prop="licenseUrl" class="upload-label">
        <el-upload class="upload" drag :http-request="uploadLicense" :show-file-list="false" :disabled="viewOnly"
          accept=".jpg,.jpeg,.png">
          <!-- 如果已上传图片，显示图片；否则显示上传区域 -->
          <div v-if="form.licenseUrl" class="uploaded-image-container">
            <el-image style="width: 100%; height: 100%; border-radius: 4px;" :src="form.licenseUrl"
              fit="contain" :class="{ view: viewOnly }"/>
            <div class="upload-overlay">
              <div class="action-buttons">
                <div class="action-icon" @click.stop="previewImage(form.licenseUrl)" :class="{ view: viewOnly }">
                  <el-icon>
                    <View />
                  </el-icon>
                </div>
                <div v-if="!viewOnly" class="action-icon" @click.stop="removeLicense" >
                  <el-icon>
                    <delete />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="noImage">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text"><em>点击上传</em></div>
          </div>
        </el-upload>
      </el-form-item>
      <div class="license-text">
        <!-- <p>·证件支持OCR识别，请确保上传的证件图片完整清晰、字段无遮挡若含有水印或者其他原因被遮挡的字符将影响识别结果。</p>
                <p>·上传图片支持jpg/jpeg/bmp/png格式，图片不超过7M;</p>
                <p>·请您确认识别的证件信息，若有误请手动修改。</p> -->
        <ul>
          <li>证件支持OCR识别，请确保上传的证件图片完整清晰、字段无遮挡若含有水印或者其他原因被遮挡的字符将影响识别结果。</li>
          <li>上传图片支持jpg/jpeg/bmp/png格式，图片不超过7M;</li>
          <li>请您确认识别的证件信息，若有误请手动修改。</li>
        </ul>
      </div>
      <el-form-item label="企业全称" prop="name" class="upload-label">
        <el-input v-model.trim="form.name" placeholder="请输入企业全称" clearable maxlength="50"
          @input="handleNoSpaceInput('name', $event)" />
        <el-popover placement="bottom-start" width="auto" trigger="hover" popper-class="custom-bg-popover">
          <div class="popover-text">须与企业证件保持一致，您的银行账户名称需要与此保持一致</div>
          <!-- 触发 Popover 的图标 -->
          <template v-slot:reference>
            <img src="../../../src/assets/images/period.png" alt=""
              style="width: 23px; height: 23px; margin-left: 10px; cursor: pointer" />
          </template>
        </el-popover>
      </el-form-item>
      <el-form-item label="企业全称(英文)" prop="nameEn" class="upload-label">
        <el-input v-model="form.nameEn" placeholder="请输入企业全称(英文)" clearable maxlength="50" />
        <el-popover placement="bottom-start" width="auto" trigger="hover" popper-class="custom-bg-popover">
          <div>英文名称只能包含英文字母、英文空格，请勿输入其他语言或字符</div>
          <!-- 触发 Popover 的图标 -->
          <template v-slot:reference>
            <img src="../../../src/assets/images/period.png" alt=""
              style="width: 23px; height: 23px; margin-left: 10px; cursor: pointer" />
          </template>
        </el-popover>
      </el-form-item>
      <el-form-item label="企业证件号码" prop="idNo" class="upload-label">
        <el-input v-model.trim="form.idNo" placeholder="请填写企业证件上的统一社会信用代码" clearable
          @input="handleNoSpaceInput('idNo', $event)" />
      </el-form-item>
      <el-form-item label="所在地区" prop="provinceName" class="upload-label">
        <el-select v-model="form.provinceName" placeholder="请选择省份" style="width: 182px; margin-right: 15px"
          @change="handleProvinceChange">
          <el-option v-for="p in provinceList" :key="p.code" :label="p.name" :value="p" />
        </el-select>

        <el-select v-model="form.cityName" placeholder="请选择城市" style="width: 182px; margin-right: 15px" prop="city"
          @change="handleCityChange">
          <el-option v-for="c in cityList" :key="c.code" :label="c.name" :value="c" />
        </el-select>
        <el-select v-model="form.districtName" placeholder="请选择区县" style="width: 182px" prop="district"
          @change="handleDistrictChange" :disabled="districtsDisable">
          <el-option v-for="d in districtList" :key="d.code" :label="d.name" :value="d" />
        </el-select>
      </el-form-item>
      <el-form-item label="企业地址" prop="address" class="upload-label">
        <el-input v-model.trim="form.address" placeholder="请输入地址" clearable maxlength="30"
          @input="handleNoSpaceInput('address', $event)" />
          <el-popover placement="bottom-start" width="auto" trigger="hover" popper-class="custom-bg-popover">
          <div>企业地区、企业地址须与企业证件上保持一致</div>
          <!-- 触发 Popover 的图标 -->
          <template v-slot:reference>
            <img src="../../../src/assets/images/period.png" alt=""
              style="width: 23px; height: 23px; margin-left: 10px; cursor: pointer" />
          </template>
        </el-popover>
      </el-form-item>
      <el-form-item label="法人姓名" prop="legalName" class="upload-label">
        <el-input v-model.trim="form.legalName" placeholder="请输入法人姓名" clearable
          @input="handleNoSpaceInput('legalName', $event)" @change="handleLegalNameChange" />
      </el-form-item>
      <el-form-item label="法人身份证号码" prop="legalId" class="upload-label">
        <el-input v-model.trim="form.legalId" placeholder="请输入法人身份证号码" clearable
          @blur="checkLegalIdCard(form.legalName, form.legalId, 'legal')" @input="handleNoSpaceInput('legalId', $event)"
          @change="handleLegalIdChange" />
        <!-- 校验提示 -->
        <div v-if="legalIdCheckMsg"
          :style="{ color: legalIdCheckCode === 200 ? '#67C23A' : '#F56C6C', fontSize: '12px', marginTop: '4px' }">
          {{ legalIdCheckMsg }}
        </div>
      </el-form-item>
      <div class="license-text">
        <p>若您的企业法人是非中国大陆人士，请务必填写法人在<span style="color: rgba(255, 141, 26, 1)">工商局</span>预留证件的号码(如:护照号码、港澳台通行证证件号码)</p>
      </div>
      <!-- 企业银行账户信息 -->
      <div class="title">企业银行账户信息</div>
      <el-form-item label="开户银行" prop="bankName" style="margin-top: 23px" class="upload-label">
        <el-input v-model.trim="form.bankName" placeholder="请输入开户银行" clearable maxlength="30"
          @input="handleNoSpaceInput('bankName', $event)" />
      </el-form-item>
      <el-form-item label="开户行支行" prop="bankBranch" class="upload-label">
        <el-input v-model.trim="form.bankBranch" placeholder="请输入开户支行" clearable maxlength="30"
          @input="handleNoSpaceInput('bankBranch', $event)" />
      </el-form-item>
      <el-form-item label="开户行号" prop="bankCode" class="upload-label">
        <el-input v-model.trim="form.bankCode" placeholder="请输入开户行号" clearable maxlength="30"
          @input="handleNoSpaceInput('bankCode', $event)" />
      </el-form-item>
      <el-form-item label="开户名" prop="accountName" class="upload-label">
        <span>{{ form.name || "请先填写企业全称" }}</span>
      </el-form-item>
      <el-form-item label="企业对公账号" prop="accountNo" class="upload-label">
        <el-input v-model.trim="form.accountNo" placeholder="请输入企业对公账户" clearable maxlength="30"
          @input="handleNoSpaceInput('accountNo', $event)" />
      </el-form-item>
      <!-- 管理员认证 -->
      <div class="title">管理员认证</div>
      <el-form-item label="选择管理员身份" prop="managerType" style="margin-top: 23px;">
        <el-radio-group v-model="form.managerType" :disabled="legalPerson" @change="handleTypeChange">
          <el-radio label="legal">法人</el-radio>
          <el-radio label="other">非法人</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 管理员姓名 -->
      <el-form-item label="管理员姓名" prop="managerName">
        <!-- 有实名信息时显示为span -->
        <span v-if="hasRealNameInfo">{{ form.managerName }}</span>
        <!-- 无实名信息且选择法人时显示为span -->
        <span v-else-if="!hasRealNameInfo && form.managerType === 'legal'">{{ form.managerName }}</span>
        <!-- 无实名信息且选择非法人时显示为input -->
        <el-input v-else v-model.trim="form.managerName" :disabled="disableAll" placeholder="请输入管理员姓名" clearable
          @input="handleNoSpaceInput('managerName', $event)" />
      </el-form-item>

      <!-- 管理员身份证 -->
      <el-form-item label="管理员身份证号码" prop="managerIdNo">
        <!-- 有实名信息时显示为span -->
        <span v-if="hasRealNameInfo">{{ form.managerIdNo }}</span>
        <!-- 无实名信息且选择法人时显示为span -->
        <span v-else-if="!hasRealNameInfo && form.managerType === 'legal'">{{ form.managerIdNo }}</span>
        <!-- 无实名信息且选择非法人时显示为input -->
        <el-input v-else v-model.trim="form.managerIdNo" :disabled="disableAll" placeholder="请输入管理员身份证号码" clearable
          @input="handleNoSpaceInput('managerIdNo', $event)"
          @blur="checkLegalIdCard(form.managerName, form.managerIdNo, 'manage')" />
        <!-- 校验提示 -->
        <div v-if="manageIdCheckMsg && form.managerType === 'other'"
          :style="{ color: manageIdCheckCode === 200 ? '#67C23A' : '#F56C6C', fontSize: '12px', marginTop: '4px' }">
          {{ manageIdCheckMsg }}
        </div>
      </el-form-item>


      <div class="license-text">
        <p>若您的企业人员是非中国大陆人士，请务必填写法人在<span style="color: rgba(255, 141, 26, 1)">工商局</span>预留证件的号码(如:护照号码、港澳台通行证证件号码)</p>
      </div>
      <!-- 人脸识别按钮 -->
      <el-form-item label="人脸识别" prop="faceStatus" class="upload-label">
        <div class="face-row">
          <el-button type="primary" :disabled="form.faceStatus === 'verified'" @click="handleFaceVerify"> 点击开始验证
          </el-button>
          <div v-if="form.faceStatus === 'verified'" class="verified">已认证</div>
<!--           <el-button type="primary" @click="setFaceStatus">模拟人脸认证成功</el-button>-->
        </div>
        <!-- 动态码 -->
        <el-image v-if="qrcode" :src="qrcode" style="width: 120px; margin-top: 8px" />
      </el-form-item>
      <el-form-item label="企业授权书" prop="authLetterUrl" v-if="form.managerType === 'other'" class="upload-label">
        <el-upload class="upload" drag :http-request="uploadAuthLetter" :show-file-list="false" :disabled="viewOnly"
          accept=".jpg,.jpeg,.png">
          <!-- 如果已上传图片，显示图片；否则显示上传区域 -->
          <div v-if="form.authLetterUrl" class="uploaded-image-container">
            <el-image style="width: 100%; height: 100%; border-radius: 4px;" :src="form.authLetterUrl"
              fit="contain" />
            <div class="upload-overlay">
              <div class="action-buttons">
                <div class="action-icon" @click.stop="previewImage(form.authLetterUrl)" :class="{ view: viewOnly }">
                  <el-icon>
                    <View />
                  </el-icon>
                </div>
                <div v-if="!viewOnly" class="action-icon" @click.stop="removeAuthLetter">
                  <el-icon>
                    <delete />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="noImage">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text"><em>点击上传</em></div>
          </div>
        </el-upload>
      </el-form-item>
      <div class="license-text" v-if="form.managerType === 'other'">
        <p>
          请上传加盖企业公章的企业授权书，点击下载
          <span class="download-link" @click="downloadFile()">
            《企业授权书》
          </span>
        </p>
      </div>
      <!-- 企业联系人 -->
      <div class="title">企业联系人</div>
      <el-form-item style="margin-left: -140px">
        <div v-for="(c, idx) in form.contacts" :key="idx"
          style="display: flex; gap: 8px; margin-bottom: 23px; align-items: center">
          姓名<el-input style="width: 218px" v-model.trim="c.name" placeholder="姓名" maxlength="10"
            @input="handleContactNoSpaceInput(idx, 'name', $event)" /> 手机号<el-input style="width: 218px"
            v-model.trim="c.mobile" placeholder="手机号" @input="handleContactNoSpaceInput(idx, 'mobile', $event)" />
          职位<el-input style="width: 218px" v-model.trim="c.role" placeholder="职位" maxlength="10"
            @input="handleContactNoSpaceInput(idx, 'role', $event)" />
          <!-- <el-button type="danger" @click="removeContact(idx)" v-if="!viewOnly" style="margin-right: 10px;">删除</el-button> -->
          <img src="@/assets/images/remove.png" alt=""
            style="width: 22px; height: 22px; cursor: pointer; margin-left: 10px; margin-right: 20px"
            @click="removeContact(idx)" v-if="!viewOnly" />
        </div>
        <el-button type="primary" @click="addContact" v-if="form.contacts.length === 0"
          style="margin-top: -8px">新增联系人</el-button>
        <img src="@/assets/images/add.png" alt="" style="width: 22px; height: 22px; cursor: pointer; margin-top: -22px"
          @click="addContact" v-if="!viewOnly && form.contacts.length > 0" />
      </el-form-item>
      <div style="margin-top: 16px" v-if="!viewOnly">
        <el-checkbox v-model="form.agreed">
          <span style="color: #606266;">我已阅读并同意</span>
          <span style="color: rgba(22, 119, 255, 1); cursor: pointer;" @click="goToUserAgreement">《用户协议》</span>
          <span style="color: #606266;">及</span>
          <span style="color: rgba(22, 119, 255, 1); cursor: pointer;" @click="goToPrivacyPolicy">《隐私政策》</span>
        </el-checkbox>
      </div>
      <!-- 提交按钮 -->
      <div class="submit" v-if="!viewOnly">
        <el-button type="primary" @click="handleSave" class="save">保存</el-button>
        <el-button type="primary" @click="handleNext" class="next">下一步</el-button>
      </div>
      <!-- 打款认证信息（仅只读显示） -->
      <div v-if="viewOnly" class="pay-info">
        <div class="title">打款认证信息</div>
        <el-descriptions :column="1" border style="margin-top: 16px">
          <el-descriptions-item label="打款金额">{{ payInfo.amount }}元</el-descriptions-item>
          <el-descriptions-item label="收款账号">{{ payInfo.account }}</el-descriptions-item>
          <el-descriptions-item label="收款公司名">青岛诺展网络科技有限公司</el-descriptions-item>
          <el-descriptions-item label="开户银行">{{ payInfo.bank }}</el-descriptions-item>
          <el-descriptions-item label="备注信息">金诺企业认证</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-form>
    <!-- 二维码弹窗 -->
    <!-- <el-dialog v-model="qrVisible" width="300px" center :close-on-click-modal="false" @closed="revokeQR">
      <template #header>
        <div class="title">人脸识别</div>
      </template>
      <div v-if="qrLoading" class="qr-loading">
        <el-icon class="is-loading" style="font-size: 24px; margin-right: 8px">
          <Loading />
        </el-icon>
        正在生成二维码...
      </div>
      <div v-else-if="qrError" class="qr-error">
        <el-icon style="color: #f56c6c; font-size: 24px; margin-right: 8px">
          <CircleCloseFilled />
        </el-icon>
        {{ qrError }}
      </div>
      <img v-else :src="qrBlobUrl" style="width: 100%; height: auto; display: block" />
    </el-dialog> -->

    <div class="qr-dialog">
      <el-dialog v-model="qrVisible" center :close-on-click-modal="false" @closed="revokeQR">
        <template #header>
          <img src="@/assets/images/textFace.png" alt="" />
        </template>
        <div v-if="qrLoading" class="qr-loading">
          <el-icon class="is-loading" style="font-size: 24px; margin-right: 8px">
            <Loading />
          </el-icon>
          正在生成二维码...
        </div>
        <div v-else-if="qrError" class="qr-error">
          <el-icon style="color: #f56c6c; font-size: 24px; margin-right: 8px">
            <CircleCloseFilled />
          </el-icon>
          {{ qrError }}
        </div>
        <img v-else :src="qrBlobUrl" style="width: 315px; height: 321px; display: block; margin: auto auto" />
      </el-dialog>
    </div>
  </div>
  <!-- 审核附件（只读查看） -->
  <div v-if="viewOnly && !auditMode && auditImage" class="title" style="margin-top: 24px">审核附件</div>
  <el-link v-if="viewOnly && auditImage" type="primary" :href="auditImage" target="_blank"
    style="margin-left: 140px; margin-top: 8px"> 点击查看审核附件 </el-link>
  <!-- 关闭按钮（仅只读模式展示） -->
  <div class="submit" v-if="viewOnly">
    <el-button @click="closePage">关闭</el-button>
    <!-- 仅在审核模式下出现 -->
    <el-button v-if="auditMode" type="primary" @click="openAuditDialog"> 审核 </el-button>
  </div>
  <AuditDialog ref="auditDialogRef" @success="handleAuditSuccess" />
</template>

<script setup>
import { reactive, ref, toRefs, onMounted, watch, computed } from "vue";
import { ElMessage } from "element-plus";
import { UploadFilled, View, Delete } from '@element-plus/icons-vue';
import baseService from "@/service/baseService";
import { Loading, CircleCloseFilled } from "@element-plus/icons-vue";
import { getToken } from "@/utils/cache";
import { useRoute, useRouter } from "vue-router";
import useView from "@/hooks/useView";
import AuditDialog from "@/components/AuditDialog.vue";
import tabBus from "@/utils/tabBus";

const auditDialogRef = ref(null);
const auditMode = computed(() => route.query.auditMode === "1");

const route = useRoute();
const router = useRouter();

// 跳转到用户协议页面
const goToUserAgreement = () => {
  router.push('/cnas/user-agreement');
};

// 跳转到隐私政策页面
const goToPrivacyPolicy = () => {
  router.push('/cnas/privacy-policy');
};

const handleNoSpaceInput = (field, value) => {
  // 移除所有空格
  const noSpaceValue = value.replace(/\s/g, "");

  // 根据字段名更新对应的表单字段
  switch (field) {
    case "name":
      form.name = noSpaceValue;
      break;
    case "idNo":
      form.idNo = noSpaceValue;
      break;
    case "address":
      form.address = noSpaceValue;
      break;
    case "legalName":
      form.legalName = noSpaceValue;
      break;
    case "legalId":
      form.legalId = noSpaceValue;
      break;
    case "bankName":
      form.bankName = noSpaceValue;
      break;
    case "bankBranch":
      form.bankBranch = noSpaceValue;
      break;
    case "bankCode":
      form.bankCode = noSpaceValue;
      break;
    case "accountNo":
      form.accountNo = noSpaceValue;
      break;
    case "managerName":
      form.managerName = noSpaceValue;
      break;
    case "managerIdNo":
      form.managerIdNo = noSpaceValue;
      break;
  }
};
const handleContactNoSpaceInput = (index, field, value) => {
  // 移除所有空格
  const noSpaceValue = value.replace(/\s/g, "");
  if (form.contacts[index]) {
    switch (field) {
      case "name":
        form.contacts[index].name = noSpaceValue;
        break;
      case "mobile":
        form.contacts[index].mobile = noSpaceValue;
        break;
      case "role":
        form.contacts[index].role = noSpaceValue;
        break;
    }
  }
};

const loading = ref(false);
// 是否只读
const viewOnly = computed(() => route.query.viewOnly === "1");
const auditImage = ref(""); // 附件图片

const formRef = ref();
/* 省市区下拉数据 */
const provinceList = ref([]);
const cityList = ref([]);
const districtList = ref([]);
/* 校验结果 */
const manageIdCheckCode = ref("");
const legalIdCheckCode = ref("");
const manageIdCheckMsg = ref("");
const legalIdCheckMsg = ref("");
/* 管理员实名相关 */
const disableAll = ref(false); // 全部只读
const facePollingTimer = ref(null); //
const qrcode = ref("");
const qrBlobUrl = ref("");
const qrLoading = ref(false);
const qrError = ref("");
const qrVisible = ref(false);
// 审核状态 & 驳回原因
const auditStatus = ref("");
const rejectReason = ref("");
const payInfo = reactive({
  amount: "",
  account: "",
  bank: ""
});
//实名通过
const authAuditPass = ref(false);
const legalPerson = ref(false);
// 是否有实名信息的全局变量
const hasRealNameInfo = ref(false);
const districtsDisable = ref(false);
let manualChange = false; // true 表示用户手动点击

const buildDto = (step) => ({
  license: form.licenseUrl,
  companyName: form.name,
  companyNameEnglish: form.nameEn,
  creditCode: form.idNo,
  region: [form.provinceName, form.cityName, form.districtName].filter(Boolean).join(","),
  companyAddress: form.address,
  legalPerson: form.legalName,
  legalIdNo: form.legalId,
  bankName: form.bankName,
  branchName: form.bankBranch,
  branchNo: form.bankCode,
  accountName: form.accountName,
  accountNo: form.accountNo,
  authLetter: form.authLetterUrl,
  step,
  auditStatus: step === "2" ? "0" : undefined,
  authPersonAudit: {
    name: form.managerName,
    idCard: form.managerIdNo,
    isLegalPerson: form.managerType === "legal" ? "1" : "0",
    faceStatus: form.faceStatus === "verified" ? "1" : "0"
  },
  persons: form.contacts.map((c) => ({
    role: c.role,
    name: c.name,
    mobile: c.mobile
  }))
});
const getNameByCode = (list, code) => {
  const item = list.value.find((i) => i.code === code);
  return item?.name || "";
};
/* 打开审核弹窗 */
function openAuditDialog() {
  auditDialogRef.value?.open({ id: route.query.id });
}

function handleAuditSuccess() {
  tabBus.emit("refreshCompanyList");
  state.closeCurrentTab();
  router.push("/auth/authCompanyAudit-list");
}

async function getQrcodeFetch() {
  console.log(getToken());
  qrLoading.value = true; // 开始加载

  try {
    const blob = await baseService.get(
      "/noc/authcompanyaudit/getWxQrCode",
      {
        userId: faceRecordId.value,
        jumpType: 2
      },
      {},
      { responseType: "blob" }
    );

    qrBlobUrl.value = URL.createObjectURL(blob);
  } catch (error) {
    // 错误处理
    console.error("获取微信二维码失败：", error);
    qrError.value = "获取二维码失败，请重试";
  } finally {
    qrLoading.value = false; // 结束加载状态
  }
}
const handleSave = async () => {
  // if (!validateBeforeSubmit()) return
  await baseService.post("/noc/authcompanyaudit/save", buildDto("1"));
  ElMessage.success("已保存");
};
const handleNext = async () => {
  if (!form.agreed) {
    ElMessage.warning("请先同意服务协议");
    return;
  }

  // 先进行表单验证
  try {
    await formRef.value.validate();
  } catch (error) {
    ElMessage.warning("请完善错误信息");
    return;
  }

  if (!validateBeforeSubmit()) return;
  await baseService.post("/noc/authcompanyaudit/save", buildDto("2")).then((res) => {
    state.closeCurrentTab();
    if (res.type === "1") {
      router.push("/cnas/certification-results");
    } else {
      router.push("/cnas/makemoney-public");
    }
  });
  ElMessage.success("已提交，等待审核");
};
const closePage = () => {
  state.closeCurrentTab();
  router.push("/auth/authCompanyAudit-list");
};
/* -------------------- 1. 表单本体 -------------------- */
const form = reactive({
  /* 原来就有的字段，保持不变 */
  name: "",
  nameEn: "",
  idNo: "",
  province: "",
  provinceName: "",
  city: "",
  cityName: "",
  district: "",
  districtName: "",
  address: "",
  legalName: "",
  legalId: "",
  bankName: "",
  bankBranch: "",
  bankCode: "",
  accountName: "",
  accountNo: "",
  managerType: "",
  managerName: "",
  managerIdNo: "",
  faceStatus: "unverified",
  /* 上传回来的 oss url */
  licenseUrl: "",
  authLetterUrl: "",
  /* 联系人数组 */

  contacts: [], // { id, role, name, mobile }
  agreed: false
});
/* -------------------- 2. 一进页面就调接口回显 -------------------- */
// 人脸状态映射
const FACE_STATUS_MAP = {
  0: 'unverified',
  1: 'verified'
}
onMounted(async () => {
  try {
    // 只读状态下拉取打款信息
    if (viewOnly.value) {
      try {
        const { data } = await baseService.get("/noc/authcompanyaudit/getPayInfo", { id: route.query.id });
        payInfo.amount = data.amount || "--";
        payInfo.account = data.account || "--";
        payInfo.bank = data.bank || "--";
      } catch {
        ElMessage.error("获取打款信息失败");
      }
    }

    const { data } = await baseService.get("/noc/authcompanyaudit/info", { id: route.query.id });

    /* 2-1 企业信息 */
    const ae = data.auditEntity;
    form.name = ae.companyName;
    form.nameEn = ae.companyNameEnglish;
    form.idNo = ae.creditCode;
    /* 地区处理：上海市,上海市,浦东新区 */
    const regionArr = (ae.region || "").split(",").filter(Boolean); // 去掉空串
    form.provinceName = regionArr[0] || "";
    form.cityName = regionArr[1] || "";
    form.districtName = regionArr[2] || "";
    if (regionArr.length == 2) {
      districtsDisable.value = true;
    }
    /* 立即联动加载下拉选项 */
    // if (form.provinceName) await loadCities(form.provinceName, 1);
    // if (form.cityName) await loadDistricts(form.cityName, 1);
    form.address = ae.companyAddress;
    form.legalName = ae.legalPerson ?? "";
    form.legalId = ae.legalIdNo ?? "";
    auditStatus.value = ae.auditStatus;
    rejectReason.value = ae.auditReason || "暂无具体原因";
    auditImage.value = ae.auditImage;
    /* 2-2 银行信息 */
    form.bankName = ae.bankName ?? "";
    form.bankBranch = ae.branchName ?? "";
    form.bankCode = ae.branchNo ?? "";
    form.accountName = ae.accountName ?? "";
    form.accountNo = ae.accountNo ?? "";

    /* 2-3 实名认证信息 */
    const ap = data.authPerson;
    if (ap.audit) {
      // 有实名信息
      if (ap.audit === "1") {
        hasRealNameInfo.value = true;
      }
      form.managerName = ap.name || "";
      form.managerIdNo = ap.idCard || "";
      if (ap.isLegalPerson === "1") {
        form.managerType = "legal";
        legalPerson.value = true;
      } else if (ap.isLegalPerson === "0") {
        form.managerType = "other";
        legalPerson.value = true;
      } else {
        form.managerType = ""; // 空状态
        legalPerson.value = false;
      }
      console.log("打印legalPerson:", legalPerson);

      // 只有 audit === 1 才锁定，否则允许修改
      authAuditPass.value = ap.audit === "1";
      disableAll.value = authAuditPass.value;
      if (viewOnly.value) {
        form.faceStatus = FACE_STATUS_MAP[ap.faceStatus] || 'unverified'
      }
    } else {
      // 无实名信息时初始化
      hasRealNameInfo.value = false;
      form.managerName = "";
      form.managerIdNo = "";
      form.managerType = "legal";
      form.faceStatus = "unverified";
      authAuditPass.value = false;
      disableAll.value = false;
    }
    /* 2-4 联系人回显 */
    const op = data.otherPersons || [];
    form.contacts = op.map((item) => ({
      id: item.id,
      role: item.role,
      name: item.name,
      mobile: item.mobile
    }));
    /* 2-5 回显上传文件（仅用于显示） */
    form.licenseUrl = ae.license;
    form.authLetterUrl = ae.authLetter;
  } catch (e) {
    /* baseService 已统一弹错误 */
  }
  //查询省份列表
  loadProvinces();
});
// 用户手动切换时调用
function handleTypeChange() {
  if (legalPerson.value) {
    return;
  }
  if (form.managerType === "legal") {
    formRef.value.clearValidate(['managerName', 'managerIdNo']);
    // 只有在没有实名信息时才自动同步
    if (!hasRealNameInfo.value) {
      form.managerName = form.legalName;
      form.managerIdNo = form.legalId;
    }
  } else {
    // 手动切换到"非法人"才清空，且只有在没有实名信息时
    if (!hasRealNameInfo.value) {
      form.managerName = "";
      form.managerIdNo = "";
    }
  }
  form.faceStatus = "unverified";
}

// 处理法人姓名变化
const handleLegalNameChange = () => {
  if (!hasRealNameInfo.value && form.managerType === 'legal') {
    form.managerName = form.legalName;
  }
};

// 处理法人身份证号码变化
const handleLegalIdChange = () => {
  if (!hasRealNameInfo.value && form.managerType === 'legal') {
    form.managerIdNo = form.legalId;
  }
};
/* 根据省 code 查询市 */
const loadCities = async (pCode, type) => {
  if (!pCode) return;
  districtsDisable.value = false;
  const { data } = await baseService.get(`/noc/basearea/getAllCityByPcode?pcode=${pCode}&type=${type}`);
  cityList.value = data || [];
};

/* 根据市 code 查询区县 */
const loadDistricts = async (cCode, type) => {
  if (!cCode) return;
  const { data } = await baseService.get(`/noc/basearea/getAllCityByPcode?pcode=${cCode}&type=${type}`);
  console.log("res.data:", data);
  if (data.length === 0) {
    districtsDisable.value = true;
  } else {
    districtsDisable.value = false;
  }
  console.log("districtsDisable:", districtsDisable.value);
  districtList.value = data;
};
const uploadAuthLetter = async (options) => {
  const file = options.file;

  // 文件类型校验 - 只允许图片格式
  const allowedTypes = ["image/jpeg", "image/jpg", "image/png"];
  if (!allowedTypes.includes(file.type)) {
    ElMessage.error("请上传 JPG、JPEG、PNG 格式的图片文件");
    return;
  }

  if (file.size / 1024 / 1024 > 7) {
    ElMessage.error("文件大小不能超过 7MB");
    return;
  }
  const fd = new FormData();
  fd.append("file", file);

  const res = await baseService.post("/sys/oss/upload", fd);
  form.authLetterUrl = res.url;
  ElMessage.success("授权书上传成功");
};
//模拟人脸识别
const faceRecordId = ref(null);
const setFaceStatus = async () => {
  await baseService.get("/noc/authpersonaudit/setFaceStatus", {
    status: "1",
    idCard: form.managerIdNo,
    id: faceRecordId.value
  });
};
// 1.没有填写法人信息，先填写管理员认证的信息时，点击人脸识别按钮，提示：法人姓名不能为空；
// 2.没有填写法人信息，先填写管理员认证的信息时，点击人脸识别按钮，提示：法人姓名不能为空；
const handleFaceVerify = async () => {
  if (form.managerType === "") {
    ElMessage.warning("请选择管理员身份");
    return;
  }
  // 首先检查法人信息是否完整
  if (!form.legalName) {
    ElMessage.warning("法人姓名不能为空");
    return;
  }

  if (!form.legalId) {
    ElMessage.warning("法人身份证号码不能为空");
    return;
  }

  if (!form.managerName || !form.managerIdNo) {
    ElMessage.warning("请先填写管理员姓名和身份证号码");
    return;
  }

  if (form.managerType === "legal") {
    if (form.managerIdNo.trim() !== form.legalId.trim()) {
      await ElMessage.error("请选择正确的管理员身份！");
      return; // 阻断后续流程
    }
  } else if (form.managerType === "other") {
    if (form.managerIdNo.trim() === form.legalId.trim()) {
      await ElMessage.error("请选择正确的管理员身份！");
      return;
    }
  }
  // 1) 身份证+姓名校验

  // 2) 保存管理员信息
  const { id } = await baseService.post("/noc/authpersonaudit/save", {
    name: form.managerName,
    idCard: form.managerIdNo,
    faceStatus: 0
  });
  faceRecordId.value = id; // <-- 关键

  try {
    qrVisible.value = true;
    qrError.value = ""; // 重置错误状态
    // await fetchQRCode();
    await getQrcodeFetch();
  } catch (e) {
    console.log(e);
  }

  // 4) 2 秒轮询人脸识别结果
  form.faceStatus = "verifying";
  clearInterval(facePollingTimer.value);

  facePollingTimer.value = setInterval(async () => {
    const { status } = await baseService.get("/noc/authpersonaudit/getFaceStatus/" + id);
    if (status === "1") {
      await baseService.post("/noc/authpersonaudit/save", {
        name: form.managerName,
        idCard: form.managerIdNo,
        isLegalPerson: form.managerType === "legal" ? 1 : 0,
        faceStatus: 1
      });
      legalPerson.value = true;
      clearInterval(facePollingTimer.value);
      form.faceStatus = "verified";
      /* ===== 关闭弹窗 ===== */
      qrVisible.value = false;
      ElMessage.success("人脸识别成功");
      qrcode.value = ""; // 可选：成功后隐藏二维码
    }
  }, 2000);
};
/* 1. 查询全部省 */
const loadProvinces = async () => {
  const { data } = await baseService.get("/noc/basearea/getAllProvince");
  provinceList.value = data || [];
};
/* 2. 省变化 -> 查市 */
// watch(() => form.province, loadCities);
// watch(() => form.city, loadDistricts);

const uploadLicense = async (options) => {
  const file = options.file; // 这里再取值，不写类型形参

  // 文件类型校验 - 只允许图片格式
  const allowedTypes = ["image/jpeg", "image/jpg", "image/png"];
  if (!allowedTypes.includes(file.type)) {
    ElMessage.error("请上传 JPG、JPEG、PNG 格式的图片文件");
    return;
  }

  if (file.size / 1024 / 1024 > 7) {
    ElMessage.error("文件大小不能超过 7MB");
    return;
  }

  const fd = new FormData();
  fd.append("file", file);

  try {
    /* 上传 */
    const res = await baseService.post("/sys/oss/upload", fd);
    const imageUrl = res.url;
    form.licenseUrl = imageUrl;

    /* OCR */
    const ocrRes = await baseService.get("/noc/authcompanyaudit/ocr", { imageUrl });
    const c = ocrRes.company;

    /* 回填 */
    form.name = c.companyName;
    form.nameEn = c.companyNameEnglish ?? "";
    form.idNo = c.creditCode ?? "";
    form.address = c.companyAddress ?? "";
    form.legalName = c.legalPerson ?? "";

    ElMessage.success("识别完成");
  } catch {
    /* 统一提示 */
  }
};
const addContact = () => {
  form.contacts.push({ id: "", role: "", name: "", mobile: "" });
};
const removeContact = (idx) => {
  form.contacts.splice(idx, 1);
};
/* 提交前统一校验：联系人必填 + 人脸识别必过 */
const validateBeforeSubmit = () => {
  // 1. 检查营业执照是否上传
  if (!form.licenseUrl) {
    ElMessage.warning("请上传企业营业执照");
    return false;
  }

  // 2. 检查联系人信息
  if (form.contacts.some((c) => !c.name || !c.mobile || !c.role)) {
    ElMessage.warning("请完整填写所有联系人信息");
    return false;
  }

  // 3. 人脸识别状态
  if (form.faceStatus !== "verified") {
    ElMessage.warning("请先完成人脸识别");
    return false;
  }

  return true;
};
/* 失去焦点时校验 */
const checkLegalIdCard = async (name, idCard, type) => {
  if (!name || !idCard) return;

  // 移除所有空格
  const cleanIdCard = idCard.replace(/\s/g, "");

  // 中国大陆身份证正则（18位）
  const chinaIdCardPattern = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

  // 港澳居民来往内地通行证（回乡证）
  const hkMacaoPassPattern = /^[HMhm]{1}([0-9]{10}|[0-9]{8})$/;

  // 台湾居民来往大陆通行证（台胞证）
  const taiwanPassPattern = /^[0-9]{8}$/;

  // 护照校验
  const passportPattern = /^[a-zA-Z0-9]{5,17}$/;

  try {
    // 检查是否符合中国大陆身份证格式
    if (chinaIdCardPattern.test(cleanIdCard)) {
      // 符合身份证格式，调用后端接口进行实名认证
      const data = await baseService.get("/noc/authpersonaudit/checkIdCard", {
        name: name,
        idCard: cleanIdCard
      });
      const resCode = data.map?.code;
      const resMsg = data.map?.message;

      if (type == "legal") {
        legalIdCheckCode.value = resCode;
        legalIdCheckMsg.value = resMsg || "";
      } else {
        manageIdCheckCode.value = resCode;
        manageIdCheckMsg.value = resMsg || "";
      }
    }
    // 检查是否符合港澳台通行证或护照格式
    else if (
      hkMacaoPassPattern.test(cleanIdCard) ||
      taiwanPassPattern.test(cleanIdCard) ||
      passportPattern.test(cleanIdCard)
    ) {
      // 港澳台通行证或护照，只做前端格式校验，直接通过
      if (type == "legal") {
        legalIdCheckCode.value = 200;
        legalIdCheckMsg.value = "证件格式正确";
      } else {
        manageIdCheckCode.value = 200;
        manageIdCheckMsg.value = "证件格式正确";
      }
    }
    // 格式都不符合
    else {
      if (type == "legal") {
        legalIdCheckCode.value = 400;
        legalIdCheckMsg.value = "请输入正确的证件号码（身份证/港澳台通行证/护照）";
      } else {
        manageIdCheckCode.value = 400;
        manageIdCheckMsg.value = "请输入正确的证件号码（身份证/港澳台通行证/护照）";
      }
    }
  } catch (error) {
    console.error("校验失败:", error);
    if (type == "legal") {
      legalIdCheckCode.value = 500;
      legalIdCheckMsg.value = "校验服务异常，请稍后重试";
    } else {
      manageIdCheckCode.value = 500;
      manageIdCheckMsg.value = "校验服务异常，请稍后重试";
    }
  }
};

const rules = {
  licenseUrl: [{ required: true, message: "请上传营业执照", trigger: "blur" }],
  name: [{ required: true, message: "请输入企业全称", trigger: "blur" }],
  idNo: [
    { required: true, message: "企业证件号码不能为空", trigger: "blur" },
    {
      pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
      message: "请输入正确的企业证件号码",
      trigger: "blur"
    }
  ],
  nameEn: [
    {
      pattern: /^[A-Za-z ]+$/,
      message: "请输入正确的企业全称（英文）",
      trigger: "blur"
    }
  ],
  provinceName: [{ required: true, message: "请选择省份", trigger: "change" }],
  cityName: [{ required: true, message: "请选择城市", trigger: "change" }],
  districtName: [{ required: true, message: "请选择区县", trigger: "change" }],
  address: [{ required: true, message: "请输入地址", trigger: "blur" }],
  legalName: [{ required: true, message: "请输入法人姓名", trigger: "blur" }],
  legalId: [{ required: true, message: "请输入法人身份证号码", trigger: "blur" }],
  accountNo: [{ required: true, message: "请输入企业对公账号", trigger: "blur" }],
  bankName: [{ required: true, message: "请输入开户银行", trigger: "blur" }],
  bankBranch: [{ required: true, message: "请输入开户行支行", trigger: "blur" }],
  managerType: [{ required: true, message: "请选择管理员身份", trigger: "change" }],
  managerName: [
    {
      required: true,
      message: "请输入管理员姓名",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (form.managerType === "other" && !form.managerName) {
          callback(new Error("请输入管理员姓名"));
        } else {
          callback();
        }
      }
    }
  ],
  managerIdNo: [
    {
      required: true,
      message: "请输入管理员身份证号码",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (form.managerType === "other" && !form.managerIdNo) {
          callback(new Error("请输入管理员身份证号码"));
        } else {
          callback();
        }
      }
    }
  ],
  authLetterUrl: [
    {
      required: true,
      message: "请上传企业授权书",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (form.managerType === "other" && !form.authLetterUrl) {
          callback(new Error("请上传企业授权书"));
        } else {
          callback();
        }
      }
    }
  ],
  faceStatus: [{ required: true, message: "请进行人脸识别", trigger: "blur" }]
};

const next = () => {
  router.push("/cnas/makemoney-public");
};

const view = reactive({});
const state = reactive({ ...useView(view), ...toRefs(view) });

// 关闭二维码对话框时的清理工作
const revokeQR = () => {
  qrLoading.value = false;
  qrError.value = "";
  if (qrBlobUrl.value) {
    URL.revokeObjectURL(qrBlobUrl.value);
    qrBlobUrl.value = "";
  }
};

watch(
  () => form.name,
  (newName) => {
    form.accountName = newName;
  },
  { immediate: true }
);

/**
 * 处理省份选择
 * @param province
 */
const handleProvinceChange = (province) => {
  form.province = province.code;
  form.provinceName = province.name;
  // 清空城市和区县的选择
  form.city = "";
  form.cityName = "";
  form.district = "";
  form.districtName = "";

  // 清空城市和区县列表
  cityList.value = [];
  districtList.value = [];

  // 如果选择了省份，则加载该省份下的城市列表
  if (province.code) {
    loadCities(province.code, 0);
  }
};

/**
 * 处理城市选择
 * @param city
 */
const handleCityChange = (city) => {
  form.city = city.code;
  form.cityName = city.name;
  // 清空区县的选择
  form.district = "";
  form.districtName = "";

  // 清空区县列表
  districtList.value = [];

  // 如果选择了城市，则加载该城市下的区县列表
  if (city.code) {
    loadDistricts(city.code, 0);
  }
};

const handleDistrictChange = (district) => {
  form.district = district.code;
  form.districtName = district.name;
};

// 删除营业执照
const removeLicense = () => {
  form.licenseUrl = ''
  ElMessage.success('已删除营业执照')
}

// 删除授权书
const removeAuthLetter = () => {
  form.authLetterUrl = ''
  ElMessage.success('已删除授权书')
}

// 预览图片
const previewImage = (imageUrl) => {
  // 使用Element Plus的图片预览功能
  const image = new Image()
  image.src = imageUrl
  image.onload = () => {
    // 创建预览容器
    const previewContainer = document.createElement('div')
    previewContainer.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      cursor: pointer;
    `

    const previewImage = document.createElement('img')
    previewImage.src = imageUrl
    previewImage.style.cssText = `
      max-width: 90%;
      max-height: 90%;
      object-fit: contain;
    `

    previewContainer.appendChild(previewImage)
    document.body.appendChild(previewContainer)

    // 点击关闭预览
    previewContainer.onclick = () => {
      document.body.removeChild(previewContainer)
    }
  }
}


/**
 * 下载模板
 */
const downloadFile = () => {
  const link = document.createElement('a')
  link.href = '/企业授权书.docx' // 文件放在public根目录
  link.download = '企业授权书.docx' // 下载时的文件名
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}



</script>

<style scoped lang="scss">
.process {
  text-align: center;
}

.wrap {
  padding: 20px;
}

.title {
  // padding: 5px 5px 5px 10px;
  // font-size: 14px;
  // color: #303133;
  // background: rgba(242, 242, 242, 1);

  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0px;
  // line-height: 32px;
  color: rgba(56, 56, 56, 1);
  text-align: left;
  vertical-align: top;
  background: rgba(242, 242, 242, 1);
  padding: 4px 15px;
  margin-bottom: 20px;
  margin-left: -20px;
}

.el-input {
  width: 580px;
}

.upload {
  width: 321px;
}

.license-text {
  font-size: 14px;
  margin-left: 140px;
  color: rgba(128, 128, 128, 1);
  line-height: 22px;

  ul {
    padding-left: 15px;

    li {
      padding-bottom: 5px;
      font-size: 14px;
      letter-spacing: 0px;
      // color: rgba(128, 128, 128, 1);
      text-align: left;
      vertical-align: top;
    }
  }
}

.input-tip,
.upload-tip {
  margin-top: 4px;
  font-size: 12px;
  color: #999;
  line-height: 1.4;
}

.contact-name {
  margin-right: 50px;
  display: flex;
}

.contact-name span {
  margin-right: 30px;
}

.contact-name .el-input {
  width: 218px;
}

.submit {
  display: flex;
  float: right;
}

.qr-loading,
.qr-error {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  font-size: 16px;
}

.qr-error {
  color: #f56c6c;
}

.wrap.readonly {
  pointer-events: none;
  user-select: none;
  filter: grayscale(0.1);
  opacity: 0.95;
}

.view {
  pointer-events: auto !important;
  user-select: auto !important;
  filter: none !important;
  opacity: 1 !important;
}

.reject-reason {
  margin: 0 20px 20px;
}

/* 让验证的红色星号不占位置 */
:deep(.el-form-item__label) {
  position: relative;
}

:deep(.el-form-item__label::before) {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
  position: absolute;
  left: -8px;
  top: 0;
}

:deep(.el-form-item.is-required .el-form-item__label::before) {
  display: block;
}

:deep(.el-form-item:not(.is-required) .el-form-item__label::before) {
  display: none;
}

.qr-dialog {
  // width: 500px;

  :deep(.el-dialog) {
    background-color: pink;
    width: 500px;
  }

  :deep(.el-dialog__header) {
    width: 500px;
    height: 92px;
    background-image: url(https://img.js.design/assets/img/689d56c240d5d2a02e688b3f.png#95f0046a410fc34c36c47a43d87345b8);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    color: #fff;

    img {
      width: 394px;
      height: 29px;
      margin: 14px auto 30px;
    }
  }

  :deep(.el-dialog__body) {
    width: 500px;
    height: 360px;
    background-color: #ffffff;
    padding: 20px;

    img {
      width: 315px;
      height: 321px;
      margin: auto auto;
    }
  }

  :deep(.el-dialog__headerbtn .el-dialog__close) {
    font-size: inherit;
    color: #fff !important;
  }
}

.save {
  width: 100px;
  height: 32px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(239, 244, 255, 1);
  border: 1px solid rgba(22, 119, 255, 1);
  font-size: 15px;
  color: rgba(22, 119, 255, 1);
}

.next {
  width: 100px;
  height: 32px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(22, 119, 255, 1);
  font-size: 15px;
  color: #fff;
}

.verified {
  font-size: 16px;
  font-weight: 500;
  margin-left: 47px;
  color: rgba(22, 119, 255, 1);
}

.face-row {
  display: flex;
}

.upload-label :deep(.el-form-item__label) {
  font-size: 16px;
}

/* 上传图片容器样式 */
.uploaded-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uploaded-image-container img,
.uploaded-image-container :deep(.el-image) {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.uploaded-image-container :deep(.el-image__inner) {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 4px;
}

.uploaded-image-container:hover .upload-overlay {
  opacity: 1;
}

.action-buttons {
  display: flex;
  gap: 20px;
}

.action-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-icon:hover {
  transform: scale(1.1);
}

.action-icon .el-icon {
  font-size: 18px;
  color: #fff;
}

:deep(.el-upload-dragger) {
  padding: 0;
}

:deep(.noImage) {
  padding: var(--el-upload-dragger-padding-horizontal) var(--el-upload-dragger-padding-vertical);
}

.el-popover.el-popper {
  overflow: hidden;
}

.download-link {
  color: rgba(22, 119, 255, 1);
}

.download-link:hover {
  text-decoration: underline;
  cursor: pointer;
}
</style>
